/* Estilo para el menú */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fe705d;
            padding-left: 10px;
            padding-right: 10px;
            font-family: "Playwrite DE Grund Guides", cursive;
            font-weight: 400;
            font-style: normal;
            border-bottom: 2px solid#ffb7c5;
        }

        #logoheader {
            width: 40%;
            height: fit-content;
        }

        .navbar .logo {
            color: white;
            font-size: 24px;
            text-decoration: none;
        }

        .navbar .menu {
            display: flex;
            list-style-type: none;
        }

        .navbar .menu li {
            padding: 10px 15px;
        }

        .navbar .menu li a {
            color: white;
            text-decoration: none;
        }

        .navbar .menu li a:hover {
            background-color: #00cc99;
        }

        /* Estilo para el botón de menú (hamburguesa) */
        .menu-icon {
            display: none;
            flex-direction: column;
            cursor: pointer;
            height: 25px;
            width: 30px;
            justify-content: space-between;
        }

        .menu-icon div {
            width: 100%;
            height: 4px;
            background-color: white;
        }

        /* Estilo cuando la pantalla es pequeña */
        @media (max-width: 768px) {
            .navbar .menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 50px;
                right: 10px;
                background-color: #333;
                width: 200px;
            }

            .navbar .menu.active {
                display: flex;
            }

            .navbar .menu li {
                padding: 15px;
                text-align: center;
            }

            .menu-icon {
                display: flex;
            }
        }


        /* Estilos para el footer */
        footer {
            background-color: #333;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        /* Logo y enlaces de redes sociales */
        .socials {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .socials a {
            color: white;
            font-size: 30px;
            text-decoration: none;
        }

        .socials a:hover {
            opacity: 0.7;
        }

        /* Sección de contacto y políticas */
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .contact-info a {
            color: white;
            text-decoration: none;
        }

        .contact-info a:hover {
            opacity: 0.7;
        }

        /* Responsividad */
        @media (max-width: 768px) {
            footer {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .socials {
                margin-bottom: 20px;
            }
        }

        /*Redes sociales*/
        .text-black {
            color: #333333;
        }

        .font-22 {
            font-size: 22px;
        }

        .list-share {
            display: inline-block;
            list-style: none;
            padding: 0;
        }

        .list-share li {
            display: inline;
            margin-left: 30px;
        }

        .list-share li a {
            font-size: 32px;
            color: #a0a0a0;
            text-decoration: none;
        }